import { ConfigEnv, defineConfig, UserConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
//Nodejs里面内置的一个模块
import path from "path"
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

//vite.config 这个文件在当前系统中目录为：
//resolve拼接路径 __dirname这个代表当前文件绝对路径
// __dirname是Nodejs中提供全局变量
// resolve(...args:string[]):string
const pathSrc = path.resolve(__dirname, "src")

/**
 * Vite配置，以后项目中启动插件、代理、启动端口都是这个文件
 * Vite底层默认做了很多配置，如果你在项目中，自己写了配置，覆盖Vite默认配置
 */
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  // 加载环境配置，读取.env文件
  const env = loadEnv(mode,process.cwd())
  
  return {
    resolve: {
      alias: {
        "@": pathSrc
      }
    },
    plugins: [
      vue(),
      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        // import xxx from "vue"
        resolvers: [ElementPlusResolver()],
        imports: ["vue"],
        eslintrc: {
          enabled: false, // 是否自动生成 eslint 规则，建议生成之后设置 false 
          filepath: "./.eslintrc-auto-import.json", // 指定自动导入函数 eslint 规则的文件
        },
        dts: path.resolve(pathSrc, "types", "auto-imports.d.ts"), // 指定自动导入函数TS类型声明文件路径
      }),
      Components({
        resolvers: [ElementPlusResolver()],
        dts: path.resolve(pathSrc, "types", "components.d.ts"), // 指定自动导入函数TS类型声明文件路径
      })
    ],
    css:{
      preprocessorOptions:{
        scss:{
          javascriptEnabled:true,
          additionalData: `@use "@/styles/variables.scss" as *;`
        }
      }
    },
    //5173这台服务器配置
    server:{
      port:Number(env.VITE_APP_PORT),
      open:false,
      // Vite内置代理服务器，Proxy开启
      proxy:{
        [env.VITE_APP_BASE_API]:{
          target:env.VITE_APP_SERVER_PATH,
          changeOrigin:true,
          rewrite:(path)=>path.replace(new RegExp("^"+env.VITE_APP_BASE_API),"")
        }
      }
    }
  }
})
